<template>
	<view class="floor-container">
		<view v-for="item in floorData" :key="item._id" class="floor-item">
			<view class="floor-title">{{item.title}}</view>
			<swiper class="floor-swiper" :circular="true" :autoplay="true" :interval="3000" :duration="1000"
				:indicator-dots="item.imagesPath.length > 1">
				<swiper-item v-for="(imageItem, index) in item.imagesPath" :key="index">
					<image :src="imageItem" mode=""></image>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';

	const floorData = ref([{
			"_id": "60e01e0e1b3200002c00610b",
			"imagesPath": [
				"https://woniumd.oss-cn-hangzhou.aliyuncs.com/web/zhaijizhe/20210809141810.png",
				"https://woniumd.oss-cn-hangzhou.aliyuncs.com/web/zhaijizhe/20210809142053.png"
			],
			"title": "冬至吃饺子"
		},
		{
			"_id": "60e020921b3200002c00610c",
			"title": "每日开运菜",
			"imagesPath": [
				"https://woniumd.oss-cn-hangzhou.aliyuncs.com/web/zhaijizhe/20210804170206.png"
			]
		},
		{
			"_id": "60e020e01b3200002c00610d",
			"title": "减肥集中营",
			"imagesPath": [
				"https://woniumd.oss-cn-hangzhou.aliyuncs.com/web/zhaijizhe/20210804170211.png"
			]
		}
	])
</script>

<style scoped lang="scss">
	.floor-container {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 176rpx 176rpx;
		gap: 10rpx 20rpx;
		margin-top: 30rpx;
	}

	.floor-item {
		// height: 176rpx;
		position: relative;

		.floor-title {
			position: absolute;
			top: 12rpx;
			left: 12rpx;
			background-color: #d86f32;
			opacity: 0.63;
			border-radius: 8rpx;
			color: #fff;
			font-weight: 500;
			font-size: 28rpx;
			z-index: 99;
			padding: 10rpx 15rpx;
			// 去掉文本自带的上下留白
			line-height: 1;
		}
	}

	.floor-item:first-child {
		grid-row-start: span 2;
	}

	.floor-swiper {
		height: 100%;
		width: 100%;

		image {
			height: 100%;
			width: 100%;
		}
	}
</style>